<template>
  <xn-form-container :title="formData.id ? '编辑酒水存储' : '增加酒水存储'" :width="700" :visible="visible" :destroy-on-close="true"
    @close="onClose">
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
      <a-form-item label="存储酒水：" name="beverageCode">
        <a-input v-model:value="formData.beverageCode" placeholder="请选择存储酒水" allow-clear />
      </a-form-item>
      <a-form-item label="存储数量：" name="storageNum">
        <a-input v-model:value="formData.storageNum" placeholder="请输入存储数量" allow-clear />
      </a-form-item>
      <a-form-item label="剩余数量：" name="residualNum">
        <a-input v-model:value="formData.residualNum" placeholder="请输入剩余数量" allow-clear />
      </a-form-item>
      <a-form-item label="客人姓名：" name="guestName">
        <a-input v-model:value="formData.guestName" placeholder="请输入客人姓名" allow-clear />
      </a-form-item>
      <a-form-item label="客人电话：" name="guestPhone">
        <a-input v-model:value="formData.guestPhone" placeholder="请输入客人电话" allow-clear />
      </a-form-item>
      <a-form-item label="过期时间：" name="overdueDate">
        <a-date-picker v-model:value="formData.overdueDate" value-format="YYYY-MM-DD HH:mm:ss" show-time
          placeholder="请选择过期时间" style="width: 100%" />
      </a-form-item>
      <a-form-item label="备注：" name="remark">
        <a-input v-model:value="formData.remark" placeholder="请输入备注" allow-clear />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
  </xn-form-container>
</template>

<script setup name="bizBeverageForm">
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
import bizBeverageApi from '@/api/biz/bizBeverageApi'
// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)

// 打开抽屉
const onOpen = (record) => {
  visible.value = true
  if (record) {
    let recordData = cloneDeep(record)
    formData.value = Object.assign({}, recordData)
  }
}
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  formData.value = {}
  visible.value = false
}
// 默认要校验的
const formRules = {
}
// 验证并提交数据
const onSubmit = () => {
  formRef.value.validate().then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    bizBeverageApi
      .bizBeverageSubmitForm(formDataParam, formDataParam.id)
      .then(() => {
        onClose()
        emit('successful')
      })
      .finally(() => {
        submitLoading.value = false
      })
  })
}
// 抛出函数
defineExpose({
  onOpen
})
</script>
